<template>
	<view>
		<view class="page-foot bgf">
			<view class="kefu_list" v-show="showKefu">
				<view class="fs34 col10 mb30 tl">推荐经纪人</view>
				<view class="kefu_box flex-box mb40" v-for="(item,index) in house_info.brokers">
					<image :src="item.avatar" mode="aspectFill" class="avatar mr20"></image>
					<view class="flex-grow-1 tl">
						<view class="col10 fs30 pb15">{{item.nickname}}</view>
						<view class="fs24 col89 m-ellipsis">{{item.bio}}</view>
					</view>
					<image src="/static/icon/icon_sendmsg.png" @tap="jumpToChat" :data-uid="item.id" mode="aspectFill" class="icon-btn1"></image>
					<image src="/static/icon/icon_tel.png" @tap="bindPhoneCall"
							:data-tel="item.mobile" mode="aspectFill" class="icon-btn2 ml30"></image>
				</view>
			</view>
			<view class="arrow mb30" v-show="showKefu"></view>
			<view class="flex-box pl20 ptb10" >
				<view class="flex-grow-1" @click="gotoIndex()">
					<image src="/static/icon/home.png" mode="aspectFill" class="foot_icon"></image>
					<view class="fs24 col3">首页</view>
				</view>
				<view class="flex-grow-1" @click="collection()">
					<image :src="'/static/icon/icon_collect' + (house_info.is_collection == 1 ? '-on' : '') + '.png'" mode="aspectFill" class="foot_icon"></image>
					<view class="fs24 col3">收藏</view>
				</view>
				<!-- #ifdef MP -->
				<button  open-type="share" class="flex-grow-1">
					<image src="/static/icon/share.png" mode="aspectFill" class="foot_icon"></image>
					<view class="fs24 col3">转发</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button @click="sharewx()" class="flex-grow-1">
					<image src="/static/icon/share.png" mode="aspectFill" class="foot_icon"></image>
					<view class="fs24 col3">转发</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button @click="copyUrl" class="flex-grow-1">
					<image src="/static/icon/share.png" mode="aspectFill" class="foot_icon"></image>
					<view class="fs24 col3">转发</view>
				</button>
				<!-- #endif -->
				<view class="g-btn2 fs30" @click="toggleKefu">立刻咨询</view>
			</view>
		</view>
		
		<view class="container">
			<view class="swiper-box">
				<swiper class="swiper" circular @change="swiperChange" :current="swiperCurrent" interval="5000"
					duration="500">
					<template v-for="(item, index) in house_info.images_arr">
						<swiper-item>
							<image :src="item" :lazy-load="true" @tap="previewImg" :data-url="item" class="index_bg"
								mode="aspectFill"></image>
						</swiper-item>
					</template>
				</swiper>
				<view class="swipernum">{{ swiperCurrent + 1 }}/{{ house_info.images_arr.length }}</view>
			</view>

			<view class="buildinfo">
				<view class="df js title_collect">
					<view class="flex-grow-1">
						<view class="title">{{ house_info.name }}</view>
						<view class="sale_type1" v-for="(item, index) in house_info.house_tag_ids_text_arr">{{ item.tag.name }}
						</view>
					</view>
					<!-- #ifdef MP -->
					<button open-type="share" class="collect">
						<image src="/static/icon/icon_tool3.png" class="icon_collect"></image>
						<view>分享</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<button @click="sharewx()" class="collect">
						<image src="/static/icon/icon_tool3.png" class="icon_collect"></image>
						<view>分享</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<button @click="copyUrl" class="collect">
						<image src="/static/icon/icon_tool3.png" class="icon_collect"></image>
						<view>分享</view>
					</button>
					<!-- #endif -->
					
				</view>
				
				<view class="flex-box fs24 cola mb20">
					<view class="flex-grow-1">{{house_info.village2.city}} | 面积{{house_info.space}}㎡</view>
					<view>距离 {{house_info.distance}}</view>
				</view>
				
				<view class="df ac js">
					<view class="price fs24">
						<text>¥</text>
						<text class="fs32 fwb">{{ house_info.price }}/</text>
						<text>月</text>
					</view>
				</view>
			</view>

			<view class="roominfo">
				<view class="title">
					<view class="fs34 pb30">房间信息</view>
				</view>
				<view class="df ac tc pb20">
					<view class="flex-grow-1">
						<view class="fs34 fwb">
							{{ house_info.space }}
							<text class="fs24">㎡</text>
						</view>
						<view class="fs24 col89 pt10">面积</view>
					</view>
					<view class="flex-grow-1">
						<view class="fs34 fwb">{{ house_info.face }}</view>
						<view class="fs24 col89 pt10">朝向</view>
					</view>
					<view class="flex-grow-1">
						<view class="fs34 fwb">
							{{ house_info.room_num }}室{{ house_info.ting_num }}厅{{ house_info.wei_num }}卫</view>
						<view class="fs24 col89 pt10">户型</view>
					</view>
					<view class="flex-grow-1">
						<view class="fs34 fwb">{{ house_info.floor_num }}</view>
						<view class="fs24 col89 pt10">楼层</view>
					</view>
				</view>
				<view class="df ac pt20 flexwa">
					<view style="width: 50%" class="pt20" v-for="(item, index) in house_info.building_descript_arr">
						<text class="col83">{{ item.tag_type.name }}</text>

						<text class="pl20">{{ item.tag.name }}</text>
					</view>
					<view style="width: 50%" class="pt20" v-if="house_info.buildingtime">
						<text class="col83">建造时间</text>
					
						<text class="pl20">{{ house_info.buildingtime }}</text>
					</view>
					<view style="width: 50%" class="pt20" v-if="house_info.fixturestime">
						<text class="col83">装修时间</text>
					
						<text class="pl20">{{ house_info.fixturestime }}</text>
					</view>
				</view>
			</view>
			<view class="roominfo">
				<view class="title">
					<view class="fs34">房间介绍</view>
				</view>
				<!-- <view class="df flexwa roomintro">
			<view>空调</view>
		</view> -->
				<view class="details">
					<u-parse :content="article"></u-parse>
				</view>
				<!-- <view class="fs28 col89 mt25">
					房间描述：{{house_info.content}}
				</view> -->
			</view>
			<view class="around">
				<view class="df ac js title">
					<view class="fs34">周边设施</view>
					<view @tap="jumpToMap" class="navigator" hover-class="none">查看地图+</view>
				</view>
				<!-- <image @tap="jumpToMap" :src="house_info.mapimg" class="aroundmap"></image> -->
				<map class="aroundmap" scale="10" :longitude="house_info.village2.lng"
					:latitude="house_info.village2.lat" :markers="markers"></map>
				<view class="df ac trafficbox">
					<view :class="'flex-grow-1 tc ' + (nindex == 0 ? 'active' : '')" @tap="shownear(0)">
						<image src="/static/icon/icon_around1.png" class="traffic"></image>
						<view>
							公交
							<text>({{ house_info.village2.nearby_bus_num }})</text>
						</view>
					</view>
					<view :class="'flex-grow-1 tc ' + (nindex == 1 ? 'active' : '')" @tap="shownear(1)">
						<image src="/static/icon/icon_around2.png" class="traffic"></image>
						<view>
							地铁
							<text>({{ house_info.village2.nearby_subway_num }})</text>
						</view>
					</view>
					<view :class="'flex-grow-1 tc ' + (nindex == 2 ? 'active' : '')" @tap="shownear(2)">
						<image src="/static/icon/icon_around3.png" class="traffic"></image>
						<view>
							学校
							<text>({{ house_info.village2.nearby_shop_num }})</text>
						</view>
					</view>
					<view :class="'flex-grow-1 tc ' + (nindex == 3 ? 'active' : '')" @tap="shownear(3)">
						<image src="/static/icon/icon_around4.png" class="traffic"></image>
						<view>
							购物
							<text>({{ house_info.village2.nearby_shop_num }})</text>
						</view>
					</view>
					<view :class="'flex-grow-1 tc ' + (nindex == 4 ? 'active' : '')" @tap="shownear(4)">
						<image src="/static/icon/icon_around5.png" class="traffic"></image>
						<view>
							医疗
							<text>({{ house_info.village2.nearby_hospital_num }})</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="village_data.length > 0" class="alsolookfor">
				<view class="df ac js title">
					<view class="fs34">同小区房源</view>
					<navigator class="navigator" hover-class="none"
						:url="'/pages/rental/renting_list/renting_list?village_id=' + house_info.village_id + '&village_name=' + house_info.village.name">
						更多+
					</navigator>
				</view>
				<navigator :url="'/pages/rental/renting/renting?id=' + item.id" class="houseitem df ac"
					@tap="gotohousedetail" v-for="(item, index) in village_data">
					<view class="houseimg">
						<image :src="item.image_text" :lazy-load="true" mode="aspectFill"></image>
					</view>

					<view class="flex-grow-1">
						<view class="df ac js">
							<view class="housename single-line">{{ item.name }}</view>
						</view>
						<view class="placesize">
							<text class="pr100">{{ item.village2.city }} | {{ item.village2.region }}</text>
							<text>{{ item.space }}㎡</text>
						</view>
						<view class="targetbox df flexwa">
							<view class="targetitem" v-for="(targets, index1) in item.house_tag_ids_text_arr">
								{{ targets.tag.name }}</view>
						</view>
						<view class="housecost">
							¥
							<text>{{ item.price }}</text>
							/月
						</view>
					</view>
				</navigator>
			</view>
			<view v-if="recommend_data.length > 0" class="alsolookfor">
				<view class="df ac js title">
					<view class="fs34">其他房源</view>
					<navigator class="navigator" hover-class="none" url="/pages/rental/renting_list/renting_list">更多+
					</navigator>
				</view>
				<navigator :url="'/pages/rental/renting/renting?id=' + item.id" class="houseitem df ac"
					v-for="(item, index) in recommend_data">
					<view class="houseimg">
						<image :src="item.image_text" :lazy-load="true" mode="aspectFill"></image>
					</view>

					<view class="flex-grow-1">
						<view class="df ac js">
							<view class="housename single-line">{{ item.name }}</view>
						</view>
						<view class="placesize">
							<text class="pr100">{{ item.village2.city }} | {{ item.village2.region }}</text>
							<text>{{ item.space }}㎡</text>
						</view>
						<view class="targetbox df flexwa">
							<view class="targetitem" v-for="(targets, index1) in item.house_tag_ids_text_arr">
								{{ targets.tag.name }}</view>
						</view>
						<view class="housecost">
							¥
							<text>{{ item.price }}</text>
							/月
						</view>
					</view>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				id: 0,
				//markers
				nindex: 0,
				lat:'',
				lng:'',
				markers: [{
					id: 1,
					latitude: 31.08574,
					longitude: 121.17409,
					iconPath: '/static/icon/icon_map-none.png',
					callout: {
						content: '国贸佘山原墅',
						color: '#000',
						fontSize: 14,
						borderWidth: 2,
						borderRadius: 10,
						borderColor: '#fff',
						bgColor: '#fff',
						padding: 5,
						display: 'ALWAYS',
						textAlign: 'center'
					}
				}],
				// 房源信息
				house_info: null,

				// 推荐房源
				recommend_data: [],

				// 获取同小区房源
				village_data: [],

				//当前轮播图下标
				swiperCurrent: 0,

				//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				// 预约手机号
				appoint_mobile: '',

				appoint_mobile_text: '',
				broker_user_id: 0,
				isLoading: true,

				// 判断是否尚在加载中
				article: '',

				// 内容数据
				popupStatus: false,

				//订阅咨询预约弹窗
				reserveStatus: false,

				//预约成功弹窗
				popupStatus1: false,

				//专车看房弹窗
				popupStatus2: false,

				//我要咨询弹窗
				popupStatus3: false,

				//订阅价格变动通知弹窗
				all_img_arr: [],

				showall: '',
				showcon: '',
				newhouseindex: '',
				avatar: '',
				nickname: '',
				service_num: '',
				name: '',
				targets: [],
				showKefu:false
			};
		},
		onLoad: function(options) {
			let that = this;
			this.id = options.id || 0
			// 扫小程序码获得数据
			functions.handlePid('rental', options, function(id) {
				if (id) {
					that.id = id
			
				}
				that.initData();
			});
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onShareAppMessage: function() {
			var info = this.house_info;
			return {
				title: info.name,
				path: '/pages/rental/renting/renting?id=' + info.id + '&isShare=1'
			};
		},
		methods: {

			copyUrl() {
				var url = app.globalData.h5_url+'/pages/rental/renting/renting?id='  + info.id;
				uni.showModal({
					content: '确定复制分享链接？',
					confirmText: '确定',
					success: () => {
						uni.setClipboardData({
							data: url,
							success: function() {
								uni.hideToast({
									title: '复制成功',
									duration: 2000,
									icon: 'none'
								});
							},
							fail: function(err) {
								uni.showToast({
									title: '复制失败',
									duration: 2000,
									icon: 'none'
								});
							}
						});
					}
				});
			},
			//分享
			sharewx(){
				var info = this.house_info;
				
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					imageUrl: info.image_text,
					href: '/pages/rental/renting/renting?id=' + info.id,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			changeMarkers() {
				var that = this;
				var nindex = Number(this.nindex);
				var arr = [];
			
				switch (nindex) {
					case 0:
						arr = that.house_info.village2.nearby_bus_json_arr;
						break;
			
					case 1:
						arr = that.house_info.village2.nearby_subway_json_arr;
						break;
			
					case 2:
						arr = that.house_info.village2.nearby_school_json_arr;
						break;
			
					case 3:
						arr = that.house_info.village2.nearby_shop_json_arr;
						break;
			
					case 4:
						arr = that.house_info.village2.nearby_hospital_json_arr;
						break;
			
					default:
						break;
				}
				//console.log(arr)
				var markersArr = [];
				for (let index = 0; index < arr.length; index++) {
					let element = arr[index];
					
					markersArr.push({
						id: index,
						latitude: element.lat,
						longitude: element.lng,
						iconPath: '/static/icon/icon_map-none.png',
						callout: {
							content: element.name,
							color: '#000',
							fontSize: 14,
							borderWidth: 2,
							borderRadius: 10,
							borderColor: '#fff',
							bgColor: '#fff',
							padding: 5,
							display: 'ALWAYS',
							textAlign: 'center'
						}
					});
				}
			
				this.markers = markersArr
			},
			//交通工具
			shownear(index) {
				this.nindex = index;
				this.changeMarkers();
			},
			// 图片预览
			previewImg(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					// 当前显示图片的http链接
					urls: this.all_img_arr // 需要预览的图片http链接列表
				});
			},
			swiperChange: function(e) {
				this.swiperCurrent = e.detail.current

			},
			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				}

				var that = this;
				app.globalData.nowThat = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						functions.jumpToChat(uid,that.house_info.id,'rental');
					} else {
						functions.toast('请先登录');
					}
				});
			},

			jumpToMap: function() {
				// #ifdef H5
				location.href='https://uri.amap.com/marker?position='+this.house_info.village2.lng+','+this.house_info.village2.lat+'&name='+this.house_info.name+'&src=mypage&coordinate=gaode&callnative=0'
				// #endif
				// #ifndef H5
				app.globalData.pagesParamHouseInfo = this.house_info;
				uni.navigateTo({
					url: '/pages/house/surround_facility/surround_facility?type=1'
				});
				// #endif
			},
			// 拨打电话
			bindPhoneCall(e) {
				var tel = e.currentTarget.dataset.tel;
				functions.phoneCall({
					phoneNumber: tel //仅为示例，并非真实的电话号码
				});
			},
			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this; // 获取---房源详情
				
				app.globalData.getLocation(function(ret) {
					var lat = ret.latitude || '31.235929042252';
					var lng = ret.longitude || '121.48053886018';
					
					functions.getAjaxData(
							'/api/xiluhouse/rental/house_detail', {
								id: that.id,
								lat:lat,
								lng:lng
							},
							function(res) {
								that.article = res.data.house_info.content;
								that.isLoading = false;
					
								var all_img_arr = res.data.house_info.images_arr;
								that.all_img_arr = all_img_arr;
								if(res.data.house_info.village2.lat && res.data.house_info.village2.lng){
									res.data.house_info.village2.lat = Number(res.data.house_info.village2.lat)
									res.data.house_info.village2.lng = Number(res.data.house_info.village2.lng)
								}
								that.house_info = res.data.house_info;
								that.recommend_data = res.data.recommend_data;
								that.village_data= res.data.village_data;
								
								that.changeMarkers();
					
							}
						);

				})
			},

			gotohousedetail() {
				console.log('占位：函数 gotohousedetail 未声明');
			},
			//经纪人
			toggleKefu(){
				this.showKefu = !this.showKefu
			},
			//首页
			gotoIndex(){
				uni.switchTab({
					url: '/pages/home/index/index'
				})
			},
			//收藏
			collection(){
				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						var id = that.id;
				        
						functions.submitAjaxData(
							that,
							'/api/xiluhouse.rental/toggle_collection', {
								rental_id: id,
							},
							function(res) {
								let house_info = that.house_info;
								house_info.is_collection = res.data.is_collection;
								that.house_info = house_info;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			}
		}
	};
</script>
<style>
	/* pages/renting/renting.wxss */
	@import url('@/static/css/old_project.css');
	
	.swiper {
		width: 100%;
		height: 594rpx;
		position: relative;
		z-index: 1;
	}

	.swiper image {
		display: block;
		width: 100%;
		height: 594rpx;
	}

	.swiper-dots {
		position: absolute;
		bottom: 120rpx;
		width: 100%;
		z-index: 2;
	}

	.swiper-dots .swiper-dot {
		width: 8rpx;
		height: 8rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50px;
		margin: 0 3rpx;
	}

	.swiper-dots .swiper-dot.active {
		width: 12rpx;
		background: rgba(255, 255, 255, 1);
	}

	.swiper-box {
		position: relative;
	}

	.swipernum {
		position: absolute;
		right: 40rpx;
		bottom: 20rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50rpx;
		z-index: 2;
		color: #fff;
		width: 70rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.buildinfo {
		padding: 30rpx 40rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.buildinfo .title {
		font-size: 34rpx;
		line-height: 45rpx;
		padding-bottom: 13rpx;
		font-weight: bold;
	}

	.buildinfo .collect {
		padding: 0 30rpx;
		text-align: center;
		border-left: 1px solid #ccc;
	}

	.buildinfo .icon_collect {
		width: 30rpx;
		height: 30rpx;
		margin-bottom: 3rpx;
	}

	.buildinfo .infoleft {
		width: 170rpx;
		text-align: right;
		color: #898989;
		padding-right: 30rpx;
	}

	.buildinfo .price {
		color: #f8532f;
		font-size: 30rpx;
	}

	.buildinfo .price text {
		font-size: 24rpx;
	}

	.buildinfo .icon_tips {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.buildinfo .priceintro {
		font-size: 24rpx;
		color: #ccc;
		padding-left: 55rpx;
	}

	.buildinfo .title_collect {
		padding-bottom: 23rpx;
	}

	.buildinfo .infoitem {
		padding-bottom: 10rpx;
	}

	.buildinfo .total {
		font-size: 34rpx;
	}

	.buildinfo .event {
		padding-top: 11rpx;
		font-size: 18px;
		color: #898989;
	}

	.buildinfo .event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00c4ff, #0091ff);
		color: #fff;
		margin-right: 10rpx;
	}

	.buildinfo .event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #ff6635, #ffb45c);
		color: #fff;
		margin-right: 10rpx;
	}

	.buildinfo .showdetail {
		color: #0091ff;
		padding: 40rpx 0;
		text-align: center;
	}

	.buildinfo .getinfo {
		width: 315rpx;
		height: 90rpx;
		border-radius: 5rpx;
		background: #f6f7fa;
		color: #0091ff;
		font-weight: 400;
	}

	.buildinfo .getinfo .icon_getinfo1 {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.buildinfo .getinfo .icon_getinfo2 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.buildinfo .hotsale {
		height: 90rpx;
		border-radius: 8rpx;
		background: linear-gradient(270deg, #f7dba3, #fff2dc);
		margin-top: 50rpx;
		padding: 0 20rpx;
		color: #53421c;
	}

	.buildinfo .bang {
		width: 52rpx;
		color: #fff;
		text-align: center;
		line-height: 52rpx;
		height: 52rpx;
		border-radius: 8rpx;
		background: #ff8941;
		margin-right: 20rpx;
	}

	.buildinfo .icon_r {
		width: 26rpx;
		height: 26rpx;
	}

	.buildinfo button.collect {
		padding: 0;
		margin: 0;
		width: 100rpx;
		height: 70rpx;
		font-size: 24rpx;
	}

	.discountbox {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.title {
		padding: 0 0 33rpx;
		font-size: 34rpx;
		color: #101010;
	}

	.title .navigator {
		font-size: 24rpx;
		color: #898989;
		height: 46rpx;
		line-height: 46rpx;
	}

	.discountbox .discount {
		height: 120rpx;
		border-radius: 15rpx;
		color: #0091ff;
		background: #e5f2fc;
		padding: 0 20rpx 0 30rpx;
	}

	.discountbox .discount .btn1 {
		width: 100rpx;
		height: 40rpx;
		border-radius: 8rpx;
		background: #ff7b40;
		color: #fff;
		font-size: 20rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.discountbox .discount .btn2 {
		width: 100rpx;
		height: 40rpx;
		border-radius: 8rpx;
		background: #0091ff;
		color: #fff;
		font-size: 20rpx;
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.agentbox {
		padding: 40rpx 40rpx 20rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.contact {
		padding: 0 0 40rpx 0;
	}

	.icon_avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.contact button.conbtn {
		width: 70rpx;
		height: 70rpx;
		padding: 0;
		margin: 0 0 0 30rpx;
	}

	.contact .conbtn image {
		width: 70rpx;
		height: 70rpx;
	}

	.housetype {
		padding: 40rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.housetype .typeitem {
		padding-bottom: 30rpx;
	}

	.housetype .imgebox {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		border: solid 1px #f4f3f3;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.housetype .imgebox image {
		width: 240rpx;
		height: 190rpx;
	}

	.housetype .compete {
		font-size: 24rpx;
		color: #898989;
	}

	.housetype .compete text {
		color: #f8532f;
	}

	.housetype button.contactkefu {
		width: 100%;
		height: 150rpx;
		border-radius: 15px;
		position: relative;
		padding-left: 150rpx;
		color: #0091ff;
		margin-bottom: 40rpx;
	}

	.housetype .kefubg {
		position: absolute;
		width: 670rpx;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.housetype .contactkefu .tel {
		width: 90rpx;
		height: 90rpx;
	}

	.dynamiclist .dynamicitem {
		padding-left: 30rpx;
		position: relative;
		padding-bottom: 40rpx;
	}

	.dynamiclist .dynamicitem::before {
		content: '';
		display: block;
		width: 1px;
		height: 100%;
		background-color: #f4f3f3;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.dynamiclist .dynamicitem .time {
		font-size: 24rpx;
		color: #898989;
		padding-left: 20rpx;
	}

	.dynamiclist .dynamicitem .title {
		font-size: 32rpx;
		padding: 35rpx 0 0;
		font-weight: 400;
		padding-bottom: 18rpx;
	}

	.dynamiclist .dynamicitem .detail {
		line-height: 39rpx;
	}

	.dynamiclist .dynamicitem .dyname {
		width: 80rpx;
		height: 41rpx;
		text-align: center;
		line-height: 41rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		border-radius: 10rpx 0 10rpx 0;
	}

	.dynamiclist .dynamicitem .dyname::before {
		content: '';
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		position: absolute;
		left: -1%;
		top: 17rpx;
	}

	.dynamiclist .dynamicitem:nth-of-type(1) .dyname {
		background: linear-gradient(270deg, #ffb45c, #ff6635);
	}

	.dynamiclist .dynamicitem:nth-of-type(1) .dyname::before {
		background: linear-gradient(270deg, #ffb45c, #ff6635);
	}

	.dynamiclist .dynamicitem:nth-of-type(1)::before {
		height: 90%;
	}

	.dynamiclist .dynamicitem:last-child::before {
		height: 90%;
		bottom: 30rpx;
	}

	.dynamiclist .dynamicitem:nth-of-type(2) .dyname {
		background: linear-gradient(270deg, #93eb32, #7ac528);
	}

	.dynamiclist .dynamicitem:nth-of-type(2) .dyname::before {
		background: linear-gradient(270deg, #93eb32, #7ac528);
	}

	.dynamiclist .dynamicitem:nth-of-type(3) .dyname {
		background: linear-gradient(270deg, #ff8897, #fe6075);
	}

	.dynamiclist .dynamicitem:nth-of-type(3) .dyname::before {
		background: linear-gradient(270deg, #ff8897, #fe6075);
	}

	.dynamiclist .dynamicitem:nth-of-type(4) .dyname {
		background: linear-gradient(270deg, #00c4ff, #0091ff);
	}

	.dynamiclist .dynamicitem:nth-of-type(4) .dyname::before {
		background: linear-gradient(270deg, #00c4ff, #0091ff);
	}

	.getinfo2 {
		width: 670rpx;
		height: 100rpx;
		border-radius: 15rpx;
		background: #f6f7fa;
		margin-bottom: 60rpx;
		color: #0091ff;
		font-size: 30rpx;
		margin: 60rpx 0;
	}

	.getinfo2 image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.infopic {
		width: 670rpx;
		height: 380rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.infopic image {
		width: 670rpx;
		height: 380rpx;
	}

	.trafficbox {
		padding-bottom: 40rpx;
	}

	.around {
		padding: 40rpx 40rpx 0;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.aroundmap {
		width: 100%;
		height: 280rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 8;
	}

	.traffic {
		width: 52rpx;
		height: 52rpx;
		margin: 40rpx 0 15rpx;
	}

	.intro {
		padding-top: 40rpx;
	}

	.intro .avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.intro .introduce {
		line-height: 44rpx;
	}

	.tirpple-line {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.buliding-detail {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.buliding-detail .title {
		font-size: 32rpx;
	}

	.detailitem {
		line-height: 44rpx;
		color: #898989;
	}

	.detailitem .content text {
		float: left;
	}

	.hot {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.read {
		line-height: 15rpx;
	}

	.time-read {
		padding-top: 20rpx;
	}

	.comment {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.comment .useritem {
		padding-bottom: 40rpx;
	}

	.comment .icon_avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.comment .comdetail {
		padding: 16rpx 0;
	}

	.comment .icon_zan {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.comment .getinfo2 {
		margin: 0;
	}

	.comment .consultcom .name {
		font-size: 34rpx;
		padding-bottom: 13rpx;
	}

	.comment .consultcom .professor {
		font-size: 24rpx;
		color: #898989;
	}

	.comment .consultcom .phone {
		padding: 14rpx 26rpx;
		font-size: 24rpx;
		color: #0091ff;
		border-radius: 8rpx;
		margin: 0;
		background-color: #e5f4ff;
		width: 150rpx;
	}

	.comment .consultcom .detail {
		line-height: 44rpx;
		margin: 30rpx 0 20rpx;
	}

	.comment .consultcom .detail.textflow {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}

	.newhouse {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.newhouse .newpic {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #e5f4ff;
		margin: 0 auto 24rpx;
	}

	.newhouse .newpic image {
		width: 48rpx;
		height: 49rpx;
	}

	.newhouse .newbox {
		border-radius: 15rpx;
		padding: 22rpx 20rpx;
		margin-top: 35rpx;
		position: relative;
		background: #f6f7fa;
	}

	.newhouse .newbox::after {
		content: '';
		display: block;
		position: absolute;
		top: -22rpx;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-top: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 15rpx solid #f6f7fa;
		border-left: 15rpx solid transparent;
	}

	.newhouse .newbox1::after {
		left: 17%;
	}

	.newhouse .newbox2::after {
		left: 50%;
	}

	.newhouse .newbox3::after {
		left: 83%;
	}

	.wantconsult {
		width: 150rpx;
		color: #0091ff;
		text-align: center;
		line-height: 50rpx;
		height: 50rpx;
		border-radius: 30rpx;
		border: solid 1px #0091ff;
		font-size: 24rpx;
	}

	.alsolookfor {
		padding: 40rpx 40rpx 0;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.alsolookfor .houseimg {
		width: 240rpx;
		height: 190rpx;
		overflow: hidden;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.alsolookfor .houseimg image {
		width: 240px;
		height: 190rpx;
	}

	.alsolookfor .housename {
		font-size: 30rpx;
	}

	.alsolookfor .placesize {
		font-size: 24rpx;
		color: #898989;
		padding: 12rpx 0 14rpx;
	}

	.alsolookfor .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: 18rpx;
		color: #0091ff;
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.alsolookfor .price {
		color: #f8532f;
	}

	.alsolookfor .price text {
		font-size: 34rpx;
	}

	.alsolookfor .houseitem {
		margin-bottom: 30rpx;
	}

	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
	}

	.footavatar {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.footbox .name {
		font-size: 32rpx;
		line-height: 43rpx;
	}

	.footbox .btn1 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: #0091ff;
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
	}

	.footbox .btn2 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		margin-left: 15rpx;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
	}

	.footbox .icon_search {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.footbox .icon_tel2 {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.footbox .conbtn1 {
		width: 150rpx;
		border-right: 1px solid #f4f3f3;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .conbtn2 {
		width: 150rpx;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .foot2 {
		height: 100rpx;
		background-color: #fff;
		padding-right: 40rpx;
		border-top: 1px solid #f6f7fa;
	}

	.footbox .foot1 {
		height: 100rpx;
		background-color: #fff;
		padding: 0 40rpx;
	}

	.pop {
		width: 100%;
		background-color: #fff;
		padding: 0 40rpx 30rpx;
	}

	.pop .pop-title1 {
		padding: 20rpx 0 0;
		text-align: center;
		font-size: 40rpx;
	}

	.pop .pop-title2 {
		padding: 23rpx 0 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
	}

	.pop .pop-input {
		height: 90rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;
		background: #f6f7fa;
		font-size: 30rpx;
	}

	.pop .pop-btn1 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #0091ff;
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.pop .pop-btn2 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.pop-title3 {
		padding: 20rpx 30rpx 0;
		color: #898989;
		font-size: 24rpx;
	}

	.custom-class {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.quesitem {
		padding-bottom: 30rpx;
	}

	.quesitem .asktitle {
		padding-left: 46rpx;
		position: relative;
	}

	.quesitem .asktitle::before {
		content: '问';
		display: block;
		color: #fff;
		width: 35rpx;
		height: 35rpx;
		border-radius: 10rpx;
		background: linear-gradient(180deg, #00c4ff 0%, #0091ff 100%);
		position: absolute;
		top: 0;
		left: 0;
		font-size: 20rpx;
		text-align: center;
		line-height: 35rpx;
	}

	.quesitem .solve {
		width: 80rpx;
		height: 35rpx;
		text-align: center;
		line-height: 35rpx;
		background-color: #f6f7fa;
		font-size: 20rpx;
		color: #b8bdca;
		border-radius: 8rpx;
	}

	.sale_type1 {
		width: auto;
		padding: 0 6rpx;
		margin-right: 10rpx;
	}

	.buildinfo .price {
		color: #f8532f;
	}

	.buildinfo .price .fs32 {
		font-size: 32rpx;
	}

	.buildinfo .icon_tips {
		width: 22rpx;
		height: 22rpx;
	}

	.buildinfo .tipsbox {
		font-size: 24rpx;
		color: #ccc;
	}

	.roominfo {
		padding: 40rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.roominfo .title {
		padding-bottom: 0;
	}

	.roominfo .details {
		color: #898989;
		font-size: 24rpx;
		line-height: 33rpx;
		padding-top: 30rpx;
	}

	.col83 {
		color: #838383;
	}

	.roomintro view {
		width: 20%;
		text-align: center;
		padding-top: 30rpx;
	}

	.pop {
		width: 100%;
		background-color: #fff;
		padding: 0 40rpx 30rpx;
	}

	.pop .pop-title1 {
		padding: 20rpx 0 0;
		text-align: center;
		font-size: 40rpx;
	}

	.pop .pop-title2 {
		padding: 23rpx 0 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
	}

	.pop .pop-input {
		height: 90rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;
		background: #f6f7fa;
		font-size: 30rpx;
	}

	.pop .pop-btn1 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #0091ff;
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.pop .pop-btn2 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.pop-title3 {
		padding: 20rpx 30rpx 0;
		color: #898989;
		font-size: 24rpx;
	}

	.custom-class {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.reserve {
		background-color: #fff;
		padding: 10rpx 40rpx 30rpx;
		text-align: center;
	}

	.reserve .icon_reserve {
		width: 120rpx;
		height: 120rpx;
		margin: 0 0 40rpx;
	}

	.reserve .title1 {
		font-size: 40rpx;
		padding-bottom: 23rpx;
	}

	.reserve .title2 {
		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;
		padding: 0 20rpx 20rpx;
	}

	.reserve .reserve-btn1 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #0091ff;
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.reserve .reserve-btn2 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		margin-top: 30rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.custom-class {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.quesitem {
		padding-bottom: 30rpx;
	}

	.quesitem .asktitle {
		padding-left: 46rpx;
		position: relative;
	}

	.quesitem .asktitle::before {
		content: '问';
		display: block;
		color: #fff;
		width: 35rpx;
		height: 35rpx;
		border-radius: 10rpx;
		background: linear-gradient(180deg, #00c4ff 0%, #0091ff 100%);
		position: absolute;
		top: 0;
		left: 0;
		font-size: 20rpx;
		text-align: center;
		line-height: 35rpx;
	}

	.quesitem .solve {
		width: 80rpx;
		height: 35rpx;
		text-align: center;
		line-height: 35rpx;
		background-color: #f6f7fa;
		font-size: 20rpx;
		color: #b8bdca;
		border-radius: 8rpx;
	}

	.coloractive {
		color: #0091ff;
	}

	.compicbox .compic {
		width: calc((100% - 30rpx) / 3);
		height: 200rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.compicbox .compic:nth-of-type(3n) {
		margin-right: 0;
	}
	
	
	.page-foot {
		text-align: center;
		line-height: 1.2;
	}
	
	.page-foot	button {
		padding: 0;
		margin: 0;
		background-color: transparent;
		line-height: 1;
	}
		
	.page-foot	.foot_icon {
		width: 45rpx;
		height: 45rpx;
		margin-bottom: 6rpx;
	}
		
	.page-foot	.g-btn2 {
		margin-right: 40rpx;
	}
	
	.page-foot .arrow{
		position: relative;
		box-shadow: 0 4rpx 30rpx 0 rgba(184,189,202,0.3);
	}
	.page-foot .arrow::after{
		position: absolute;
		content: '';
		top: -2rpx;
		right: 224rpx;
		border-right: 20rpx solid transparent;
		border-left: 20rpx solid transparent;
		border-top: 20rpx solid #FFF;
	}
	
	.kefu_list {
/* 		position: absolute;
		left: 0;
		right: 0; */
		position: relative;
		margin: 0 auto;
		padding: 40rpx 30rpx 10rpx;
		border-radius: 30rpx;
		width: 690rpx;
		max-height: 556rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 30rpx 0 rgba(184,189,202,0.3);
		overflow-y: scroll;
	}

	
	.kefu_list 	.avatar {
			display: block;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.kefu_list .icon-btn1{
			display: block;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			box-shadow: 0 4rpx 40rpx 0 rgba(248,103,56,0.3);
		}
		
		.kefu_list .icon-btn2{
			display: block;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			box-shadow: 0 4rpx 40rpx 0 rgba(3,103,179,0.3);
		}
			

</style>
